<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>新增异常</title>
		<link href="/css/bootstrap.min.css" rel="stylesheet">
		<link href="/css/bootstrap-switch.css" rel="stylesheet">
		<link href="/css/bootstrap-select.min.css" rel="stylesheet" />
		<script type="text/javascript" src="/js/jquery-3.0.0.min.js"></script>
		<script src="/js/bootstrap.min.js"></script>
		<script src="/js/bootstrap-switch.js"></script>
		<script src="/js/wangEditor.min.js"></script>
		<script src="/js/bootstrap3-typeahead.min.js"></script>
		<script src="/js/bootstrap-select.js"></script>
	</head>
	<body>
	<#include "/common/head.ftl">
		<div class="container-fluid">
			<div class="row">
				<#include "/common/left.ftl">
				<div class="col-sm-9">
					<ol class="breadcrumb">
						<li>
							<a href="#">主页</a>
						</li>
						<li class="active">我要提问</li>
					</ol>
					<form class="form-horizontal">
						<!-- Single button -->
						<div class="form-group">
							<label for="extype" class="col-sm-2 control-label">问答类型</label>
							<div class="col-sm-7">
								<!--<input type="text" name="extype" class="form-control" id="extype" data-provide="typeahead"/>-->
								<select class="selectpicker" id="extype" multiple>
									<#list typelist as t>
									<option>${t.typename}</option>
									</#list>
								</select>
							</div>
							<div class="col-sm-3">
								<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
									新增类型
								</button>
							</div>
						</div>
						<div class="form-group">
							<label for="qatitle" class="col-sm-2 control-label">标题</label>
							<div class="col-sm-10">
								<input type="text" name="qatitle" class="form-control" id="qatitle"/>
							</div>
						</div>
						<div class="form-group ops">
							<label for="detail" class="col-sm-2 control-label">详细信息</label>
							<div class="col-sm-10" id="detail"></div>
						</div>
						<div class="form-group" id="addop">
							<label for="flag" class="col-sm-2 control-label">是否有解决方案</label>
							<div class="col-sm-offset-2 col-sm-10">
								<input type="checkbox" id="flag">
							</div>
						</div>
						<div class="form-group ops" id="jjfa" style="">
							<label for="editor" class="col-sm-2 control-label">解决方案</label>
							<div class="col-sm-10" id="editor"></div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<button class="btn btn-info" type="button" id="addbtn">新增</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">新增问答类型</h4>
					</div>
					<div class="modal-body">
						<input type="text" id="typename" class="form-control" placeholder="问答类型名称"/>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-primary" id="addtypebtn">新增</button>
					</div>
				</div>
			</div>
		</div>
		<script>
            var E = window.wangEditor;
            var editor = new E('#editor');

            editor.customConfig.uploadImgServer = '/uploadimg';
            editor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024;
            editor.customConfig.uploadFileName = 'myfile'
            editor.create();
			editor.txt.html('')
			var detaileditor = new E('#detail');
            detaileditor.customConfig.zIndex =1;
			detaileditor.customConfig.uploadImgServer = '/uploadimg';
			detaileditor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024;
			detaileditor.customConfig.uploadFileName = 'myfile'
			detaileditor.create();
			detaileditor.txt.html('')


			$("#flag").bootstrapSwitch("state",true);
			$('#flag').on('switchChange.bootstrapSwitch', function(event, state) {
				if(state){
					$("#jjfa").show();
				}else{
					$("#jjfa").hide();
				}
			});




		/*	$("#extype").typeahead({
				source: function (query, process) {
					return $.ajax({
						url: '/ex/gettype',
						type: 'post',
						data: {name: query},
						success: function (data) {
							var obj= eval(data);//解析json数据
							var name = [];//定义一个基本类型数组
							for(var i=0;i<obj.length;i++){
								name.push(obj[i]);//把复杂类型数组的每一个元素的name保存到基本类型数组里
							}
							process(name);//调用处理函数，格式化.把转换生成的基本类型数组交给source处理
						},
					});
				}
			});*/


			$("#addtypebtn").click(function(){
				var typename = $("#typename").val();
				$.post("/qa/addtype","typename="+typename,function(r){
					if(r!=""){
						alert("新增成功！");
						var op = "<option value='"+r.id+"'>"+r.typename+"</option>";
						$("#extype").prepend(op);
						$("#extype").val(r.id);
						$('#myModal').modal('hide');
					}else{
						alert("新增失败！");
					}
				});

			});

		/*	$('#myModal').on('hidden.bs.modal', function (e) {
				// do something...
				console.log(111);
			})*/

			$("#addbtn").click(function () {
				var etype = $("#extype").val();
				var qatitle = $("#qatitle").val();
				var detail = detaileditor.txt.html();
				var flag = $('#flag').bootstrapSwitch('state');
				var solution = editor.txt.html();
				if(etype=="" || etype.length<=0){
					alert("请输入异常类型");
					return;
				}
                if(qatitle=="" || qatitle.length<=0){
                    alert("请输入问题");
                    return;
                }
				if(detail=="<p><br></p>"){
					alert("请输入详细信息");
					return;
				}
				var solutionflag=0;
				if(flag){
					solutionflag =1;
					if(solution=="<p><br></p>") {
						alert("请输入解决方案");
						return;
					}
				}
				var param = {"qatype":etype.join(","),"qatitle":qatitle,"qadetail":detail,"solutionflag":solutionflag,"solution":solution};
				$.post("/qa/add",param,function (r) {
					if(r=="success"){
					    alert("发布成功！");
					    location.href="/main"
					}else{
					    alert("发布失败，服务器出现异常，请重试！");
					}
				});			});
		</script>
	</body>
</html>